<template>
  <div class="box">
    <div class="logo"></div>
    <div class="search">
      <el-input
        v-model="input"
        placeholder="搜索"
        prefix-icon="el-icon-search"
        @change="search"
        @focus="select"
        @blur="notShow"
      ></el-input>
      <div class="toplist" :class="{ show: !Isfocus }">
        <p style="margin-left: 20px">热搜榜单</p>
        <ul>
          <li
            v-for="(i, index) in topList"
            :key="i.Score"
            @click="search(i.searchWord)"
          >
            <span class="pm">{{ index + 1 }}</span>
            <div>
              {{ i.searchWord }} <br />
              <span class="icontent">{{ i.content }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="user">
      <div class="user-icon">
        <img :src="user.avatarUrl" alt="" />
      </div>
      <span>{{ user.nickname }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      Isfocus: false,
      topList: [],
      user: {
        nickname: "未登录",
        avatarUrl: "",
      },
    };
  },
  methods: {
    search(key) {
      if (!key) {
        this.$router.push({ name: "song", query: { keywords: this.input } });
        this.$root.eventhub.$emit("search");
        this.Isfocus = false;
      } else {
        this.$router.push({ name: "song", query: { keywords: key } });
        this.$root.eventhub.$emit("search");
      }
    },
    notShow() {
      setTimeout(() => {
        this.Isfocus = false;
      }, 100);
    },
    select() {
      this.Isfocus = true;
      this.$request({
        url: "/search/hot/detail",
      }).then((success) => {
        this.topList = success.data.data;
      });
    },

    async getLoginStatus() {
      const res = await this.$request({
        url: `/login/status?timerstamp=${Date.now()}`,
        withCredentials: true, //关键
      });
      if (res.data.data.profile) {
        this.user = res.data.data.profile;
      }
    },

   
  },
  mounted() {
    this.$root.eventhub.$on("login_success", () => {
      this.getLoginStatus();
    });
      this.getLoginStatus();
  },
};
</script>

<style >
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ec4141;
  padding: 0 20px;
  color: white;
}
.logo {
  height: 66px;
  width: 180px;
  background: url("../../assets/img/topbar.png");
}

.el-input__inner {
  height: 35px;
  background-color: #e13e3e;
  border: none;
  border-radius: 17.5px;
  line-height: 35px;
  color: white;
}

.user {
  height: 35px;
  line-height: 35px;
}
.user-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: white;
  border-radius: 17.5px;

  margin-right: 10px;
  vertical-align: middle;
}
.user-icon img {
  width: 35px;
  height: 35px;
  border-radius: 17.5px;
}
.userinfo {
  display: flex;
  justify-content: space-between;
}
.login {
  margin-top: 20px;
}
.search {
  position: relative;
}
.search .toplist {
  position: absolute;
  left: -50%;
  z-index: 100;
  padding: 20px 0;
  width: 400px;
  height: 500px;
  border-radius: 10px;
  color: black;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.toplist {
  overflow: auto;
  font-size: 14px;
  line-height: 1.55em;
}
.toplist ul {
  margin-top: 20px;
}
.toplist ul li {
  display: flex;
  height: 60px;
}
.toplist ul li div {
  padding: 10px 0;
}
.pm {
  margin: 0 20px;
  height: 60px;
  line-height: 60px;
}
.toplist ul li:hover {
  background-color: #f6f6f7;
}
.show {
  display: none;
}
.toplist::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.toplist::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(245, 243, 243, 0.1);
  background: #9e9e9e;
}

.toplist::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(192, 187, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
.icontent {
  color: #999aaa;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>